<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="选择喜欢的食材"
      width="700"
      :before-close="handleClose"
    >
      <span>
        <el-table
          ref="multipleTableRef"
          :data="listData"
          style="width: 100%"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true" />
          <el-table-column prop="id" label="序号" />
          <el-table-column prop="name" label="物料名称" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="supplierName" label="供应商" />
          <el-table-column prop="wholePrice" label="批发价" />
          <el-table-column prop="sellPrice" label="零售价" />
          <el-table-column prop="purchasePrice" label="采购价" />
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="params.page"
            v-model:page-size="params.pageSize"
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import { foodsList } from "@/api/diet/food/food";
import { foodsListParams, foodsListData } from "@/api/diet/food/type";

const dialogVisible = ref(true);
const props = defineProps(["selectList"]);
const multipleTableRef = ref();

// 列表
const params = reactive<foodsListParams>({
  page: 1,
  pageSize: 5,
});
const listData = ref<foodsListData[]>([]);

const multipleSelection = ref<any[]>([]);

if (props.selectList) {
  multipleSelection.value = props.selectList;
}

const handleCurrentChange = (val: number) => {
  params.page = val;
  getList();
};

const handleSelectionChange = (val: any[]) => {
  let ids = listData.value.map((item) => item.id);

  multipleSelection.value = multipleSelection.value.filter((item) => !ids.includes(item.id));

  multipleSelection.value = [...multipleSelection.value, ...val];
};

// 总条数
let total = ref(0);
const getList = async () => {
  let res = await foodsList(params);
  // console.log("食材", res);
  total.value = res.counts;
  listData.value = res.list;

  nextTick(() => {
    let ids = props.selectList.map((item: any) => item.id);
    listData.value
      .filter((item) => ids.includes(item.id))
      .forEach((element) => {
        multipleTableRef.value.toggleRowSelection(element, true);
      });
  });
};

// 添加
const submit = () => {
  emit("confirm", multipleSelection.value);
};

// 关闭Dialog
const emit = defineEmits(["close", "confirm"]);
const handleClose = () => {
  emit("close");
};

onMounted(() => {
  getList();
});
</script>

<style lang="less" scoped>
.page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
